<template>
	<div class="upload-cus">
		<el-upload :file-list="fileList" :action="upload_file_url" :name="upload_file_col" :data="upload_ssl_file_data"
			:on-success="handleUploadSuccess" :on-preview="handlePictureCardPreview" :on-remove="handleRemove"
			:multiple="multiple" :limit="limit" :on-exceed="handleExceed">
			<slot><button class="fujian">上传文件</button></slot>
		</el-upload>
		<el-dialog :append-to-body="true" :visible.sync="dialogVisible">
			<img width="100%" :src="dialogImageUrl" alt="" />
		</el-dialog>
	</div>
</template>

<script>
import {
	mapState
} from "vuex";

export default {
	name: "ssl-file-upload",
	components: {},
	props: {
		upload_params: {
			type: Object,
			default: () => {
				return {}
			}
		},
		//上传图片的键名  图片数据源
		uid: {},

		fileList: [],
		list_upload: [],
		limit: {
			default: 1,
		},
		multiple: {
			default: false,
		},
	},
	data() {
		return {
			// fileList: [],
			dialogImageUrl: "",
			dialogVisible: false,
		};
	},
	computed: {
		...mapState([""]),

		upload_ssl_file_data() {
			let token = localStorage.getItem("token");
			return {
				action: "upload_uploadSSL",
				token: token,
				...this.upload_params
			};
		},
	},

	watch: {},

	created() { },

	methods: {
		//上传成功
		handleUploadSuccess(res, file) {
			console.log("上传结果 res", res);
			console.log("上传结果 file", file);
			let {
				code,
				data,
				msg
			} = res;
			if (code == 200) {
				this.$emit("eventCallback", {
					type: "文件上传成功",
					uid: this.uid,
					data: res.data,
				});
			}
		},

		//预览图片
		handlePictureCardPreview(file) {
			// this.dialogImageUrl = file.url;
			// this.dialogVisible = true;
		},

		//移除上传
		handleRemove(file, fileList, other) {
			console.log("删除图片 file", file);
			console.log("删除图片 fileList", fileList);
			console.log("删除图片 other", other);
			// let index = this.list_upload.findIndex((item) => item.uid == file.uid);
			// this.list_upload.splice(index, 1);

			this.$emit("parentHandleUpload", {
				type: "删除成功",
				colName: this.col,
				file,
				res: file.response,
			});

			// this.$emit("parentHandleUploadDelete", {
			//   file,
			//   colName: this.col,
			// });
		},

		//上传超出数量
		handleExceed(files, fileList) {
			this.$message.warning(
				`当前限制选择${this.limit}个文件，本次选择了 ${files.length
				} 个文件，共选择了 ${files.length + fileList.length} 个文件`
			);
		},
	},
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.el-upload--picture-card {
	border: none;
}

/deep/ .el-upload {
	// .flex-center();
	width: 140px;
	border: none;
	background: #fff;
}

.fujian {
	.flex-center();
	width: 110px;
	height: 35px;
	border: 1px solid #036dd1;
	border-radius: 4px;
	color: #036dd1;
	background: #fff;
	font-size: 14px;
}
</style>